<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-29 16:56:47
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-29 19:40:12
 * @FilePath: \fe_user_pc\src\views\shotstack\MuseMixedCut\MixedCutPreview\components\saveVideoDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  合成等待中
-->
<script setup>
import baseModel from "@/components/baseModel/baseModel.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dialog = ref(null);
import utils from "@/common/utils/utils";
const showModal = () => {
  dialog.value.showModal();
};
const closeModal = () => {
  dialog.value.closeModal();
};

// 去首页
const goHome = () => {
  router.push("/workShotstack/creationCenter/MixedCutIntroduction");
};
const goBack = () => {
  // 查看成片库
  router.push({
    name: "ComposeMaterial",
    query: {
      id: 3
    }
  });
};

const synthesisUrl =
  utils.staticPath + "images/workAi/shotstack/synthesisVideo.png";
defineExpose({
  showModal,
  closeModal,
  synthesisUrl,
});
</script>

<template>
  <div>
    <baseModel ref="dialog" :contentWidth="'420px'" :maskClosable="false">
      <template #title>
        <div class="title_box">
          <span style="color: #fff">提示</span>
        </div>
      </template>
      <template #content>
        <div class="content">
          <img :src="synthesisUrl" alt="" />

          <h2>视频已在合成中</h2>
          <p style="margin-bottom: 15px">可以到成片库查看合成视频</p>

          <slot name="btns">
            <div class="btns">
              <a-button class="btn" key="back" style="margin-right: 10px" @click="goHome">返回视频混剪首页</a-button>
              <a-button class="btn" key="submit" type="primary" :loading="loading" :disabled="disableSubmit"
                @click="goBack">
                查看成片库
              </a-button>
            </div>
          </slot>
        </div>
      </template>
      <template #footer>
        <div class="bottom"></div>
      </template>
    </baseModel>
  </div>
</template>

<style lang="less" scoped>
@fontColor: #1c1f23;

.title_box {
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 60%;
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;

  .btns {
    display: flex;
    justify-content: center;
  }

  h2 {
    color: #1c1f23;
    font-size: 20px;
    font-weight: 600;
    margin: 15px 0;
  }
}

.bottom {
  display: flex;
  justify-content: center;
}
</style>
